<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生产进度大屏 - 扫码报工系统</title>
    
    <!-- 使用系统现有的CSS和JS文件 -->
    <link rel="stylesheet" href="/assets/libs/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/assets/libs/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/css/dashboard.css">
    
    <script src="/assets/js/jquery.min.js"></script>
    <script src="/assets/js/echarts.min.js"></script>
</head>
<body>
    <!-- 大屏容器 -->
    <div class="dashboard-container">
        <!-- 顶部标题栏 -->
        <div class="dashboard-header">
            <div class="header-left">
                <span class="update-time">更新: <span id="updateTime">0s</span></span>
            </div>
            <div class="header-center">
                <h1 class="main-title">生产进度大屏监控系统</h1>
            </div>
            <div class="header-right">
                <button class="btn-refresh" onclick="manualRefresh()" style="margin-right: 10px;">
                    <i class="fa fa-refresh"></i> 刷新
                </button>
                <button class="btn-auto-toggle" onclick="toggleAutoUpdate()" style="margin-right: 10px;">
                    <i class="fa fa-pause" id="autoToggleIcon"></i> <span id="autoToggleText">暂停</span>
                </button>
                <button class="btn-exit-fullscreen" onclick="toggleFullscreen()">
                    <i class="fa fa-expand"></i> 全屏
                </button>
            </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="dashboard-content">
            <!-- 整体统计概览 - 大屏卡片 -->
            <div class="dashboard-grid">
                <div class="stats-card blue">
                    <div class="row">
                        <div class="col-md-8">
                            <h3><i class="fa fa-file-text"></i> 总订单数</h3>
                            <h1 style="font-size: 3em; margin: 0;" id="totalOrders">0</h1>
                            <p>活跃订单数量</p>
                        </div>
                        <div class="col-md-4 text-right">
                            <i class="fa fa-file-text" style="font-size: 4em; opacity: 0.3;"></i>
                        </div>
                    </div>
                </div>
                
                <div class="stats-card green">
                    <div class="row">
                        <div class="col-md-8">
                            <h3><i class="fa fa-calendar"></i> 总计划数</h3>
                            <h1 style="font-size: 3em; margin: 0;" id="totalPlans">0</h1>
                            <p>生产计划总数</p>
                        </div>
                        <div class="col-md-4 text-right">
                            <i class="fa fa-calendar" style="font-size: 4em; opacity: 0.3;"></i>
                        </div>
                    </div>
                </div>
                
                <div class="stats-card orange">
                    <div class="row">
                        <div class="col-md-8">
                            <h3><i class="fa fa-tasks"></i> 小工单数</h3>
                            <h1 style="font-size: 3em; margin: 0;" id="totalAllocations">0</h1>
                            <p>分配任务总数</p>
                        </div>
                        <div class="col-md-4 text-right">
                            <i class="fa fa-tasks" style="font-size: 4em; opacity: 0.3;"></i>
                        </div>
                    </div>
                </div>
                
                <div class="stats-card purple">
                    <div class="row">
                        <div class="col-md-8">
                            <h3><i class="fa fa-cubes"></i> 总数量</h3>
                            <h1 style="font-size: 3em; margin: 0;" id="totalQuantity">0</h1>
                            <p>计划生产总量</p>
                        </div>
                        <div class="col-md-4 text-right">
                            <i class="fa fa-cubes" style="font-size: 4em; opacity: 0.3;"></i>
                        </div>
                    </div>
                </div>
                
                <div class="stats-card red">
                    <div class="row">
                        <div class="col-md-8">
                            <h3><i class="fa fa-check-circle"></i> 已完成</h3>
                            <h1 style="font-size: 3em; margin: 0;" id="completedQuantity">0</h1>
                            <p>实际完成数量</p>
                        </div>
                        <div class="col-md-4 text-right">
                            <i class="fa fa-check-circle" style="font-size: 4em; opacity: 0.3;"></i>
                        </div>
                    </div>
                </div>
                
                <div class="stats-card aqua">
                    <div class="row">
                        <div class="col-md-8">
                            <h3><i class="fa fa-percent"></i> 完成率</h3>
                            <h1 style="font-size: 3em; margin: 0;" id="completionRate">0%</h1>
                            <p>整体完成进度</p>
                        </div>
                        <div class="col-md-4 text-right">
                            <div class="progress-ring">
                                <div id="completionChart" style="width: 120px; height: 120px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 图表区域 -->
            <div class="dashboard-grid">
                <!-- 整体进度柱状图 -->
                <div class="chart-container large-chart">
                    <h4><i class="fa fa-bar-chart"></i> 整体生产进度</h4>
                    <div id="overallProgressChart" style="width: 100%; height: 300px;"></div>
                </div>
                
                <!-- 工序完成率饼图 -->
                <div class="chart-container">
                    <h4><i class="fa fa-pie-chart"></i> 工序完成率分布</h4>
                    <div id="processPieChart" style="width: 100%; height: 300px;"></div>
                </div>
            </div>

            <!-- 员工效率图表 -->
            <div class="dashboard-grid">
                <!-- 员工完成率排行 -->
                <div class="chart-container large-chart">
                    <h4><i class="fa fa-users"></i> 员工完成率排行</h4>
                    <div id="employeeRankingChart" style="width: 100%; height: 300px;"></div>
                </div>
                
                <!-- 订单进度对比 -->
                <div class="chart-container">
                    <h4><i class="fa fa-line-chart"></i> 订单进度对比</h4>
                    <div id="orderProgressChart" style="width: 100%; height: 300px;"></div>
                </div>
            </div>

            <!-- 多维度统计标签页 -->
            <div class="chart-container">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#tab-orders" data-toggle="tab"><i class="fa fa-file-text"></i> 按订单统计</a></li>
                        <li><a href="#tab-products" data-toggle="tab"><i class="fa fa-cube"></i> 按产品统计</a></li>
                        <li><a href="#tab-processes" data-toggle="tab"><i class="fa fa-cogs"></i> 按工序统计</a></li>
                        <li><a href="#tab-employees" data-toggle="tab"><i class="fa fa-users"></i> 按员工统计</a></li>
                    </ul>
                    <div class="tab-content">
                        <!-- 按订单统计 -->
                        <div class="tab-pane active" id="tab-orders">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th>订单名称</th>
                                            <th>订单编号</th>
                                            <th>计划数</th>
                                            <th>总数量</th>
                                            <th>已完成</th>
                                            <th>完成率</th>
                                        </tr>
                                    </thead>
                                    <tbody id="orderStatsTable">
                                        <tr>
                                            <td colspan="6" class="text-center">加载中...</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- 按产品统计 -->
                        <div class="tab-pane" id="tab-products">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th>产品名称</th>
                                            <th>计划数</th>
                                            <th>总数量</th>
                                            <th>已完成</th>
                                            <th>完成率</th>
                                        </tr>
                                    </thead>
                                    <tbody id="productStatsTable">
                                        <tr>
                                            <td colspan="5" class="text-center">加载中...</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- 按工序统计 -->
                        <div class="tab-pane" id="tab-processes">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th>工序名称</th>
                                            <th>小工单数</th>
                                            <th>总数量</th>
                                            <th>已完成</th>
                                            <th>完成率</th>
                                        </tr>
                                    </thead>
                                    <tbody id="processStatsTable">
                                        <tr>
                                            <td colspan="5" class="text-center">加载中...</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- 按员工统计 -->
                        <div class="tab-pane" id="tab-employees">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th>员工姓名</th>
                                            <th>小工单数</th>
                                            <th>总数量</th>
                                            <th>已完成</th>
                                            <th>完成率</th>
                                        </tr>
                                    </thead>
                                    <tbody id="employeeStatsTable">
                                        <tr>
                                            <td colspan="5" class="text-center">加载中...</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/assets/js/dashboard.js"></script>
</body>
</html>